<template>
<div style="display: flex;justify-content: center" >
  <div style="display: flex;width: 1100px;padding: 20px;margin-top: 20px;">
    <div>
      <el-tabs tab-position="left" style="height:510px" class="demo-tabs">
        <el-tab-pane label="管理员管理">
          <div class="userSearch" style="display: flex;justify-content: flex-end;padding-right: 50px;padding-bottom: 20px;border-bottom: 2px solid #e4e7ed">
            <div>
              <el-dropdown >
                <div>
                  <el-input
                      v-model="searchName"
                      class="w-50 m-2"
                      placeholder="新加管理员"
                      :prefix-icon="Search"
                      @input="userload"
                  />
                </div>
                  <template #dropdown >
                    <el-dropdown-menu>
                      <div v-if="UserTotal>0"  v-for="item in UserList" style="display: block;width: 150px" >
                        <el-dropdown-item @click="setSearch(item.userName,item.userId)">{{item.userName}}</el-dropdown-item>
                      </div>
                      <div v-else>
                        <el-dropdown-item >请输入用户名</el-dropdown-item>
                      </div>
                    </el-dropdown-menu>
                  </template>
              </el-dropdown>
            </div>
            <div style="display: flex;align-items: center;padding-left: 10px ; padding-right: 10px">
              <el-button @click="newManager(searchName,searchId)" type="success" >确认</el-button>
            </div>
          </div>
          <el-scrollbar  height="500px">
            <div style="margin-top: 0px;display: block">
              <div style="width: 981px">
                <el-row >
                  <el-col :span="4" v-for="item in ManagerData">
                    <div class="managerCard" >
                      <el-card class="box-card">
                        <div style="display: block">
                          <div style="height: 90px">
                            {{item.managerName}}
                          </div>
                          <div>
                            <el-button type="danger" plain @click="deleteManager(item.managerId,item.repoId,item.managerName,item.repoName)" >移除</el-button>
                          </div>
                        </div>

                      </el-card>
                    </div>

                  </el-col>
                </el-row>
              </div>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="仓库管理">
          <div style="display: block">
            <el-scrollbar class="scrollbar" max-height="500px">
            <div style="display: block;">
              <div style="display: flex;justify-content: start;padding: 10px;width: 500px;margin-left: 20px;font-size: 30px;font-weight: bold;border-bottom: 2px solid #dce3e8">
                修改仓库属性
              </div>
              <div style="margin-left: 20px;display: flex;justify-content: start;padding: 10px">
                <el-select  v-model="repoStatus" placeholder="仓库属性" size="large">
                  <el-option
                      label='私有'
                      value='私有'
                  >私有</el-option>
                  <el-option
                      label='公开'
                      value='公开'
                  > 公开</el-option>
                </el-select>
              </div>

              <div style="display: flex;justify-content: start;padding: 10px;width: 500px;margin-left: 20px;font-size: 30px;font-weight: bold;border-bottom: 2px solid #dce3e8">
                修改仓库简介
              </div>
              <div style="margin-left: 10px;display: flex;justify-content: start;padding: 10px">
                <div class="editor">
                  <div style="border: 1px solid #ccc; margin-top: 10px">
                    <Toolbar
                        :editor="editorRef"
                        :defaultConfig="toolbarConfig"
                        :mode="mode"
                        style="border-bottom: 1px solid #ccc;width: 800px"
                    />
                    <Editor
                        :defaultConfig="editorConfig"
                        :mode="mode"
                        v-model="valueHtml"
                        style="height: 300px; overflow-y: hidden;width: 800px"
                        @onCreated="handleCreated"
                        @onFocus="handleFocus"
                        @onBlur="handleBlur"
                    />
                  </div>
                </div>
              </div>

              <div>
                <el-button type="success" @click="save">确定</el-button>
              </div>
            </div>
            </el-scrollbar>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</div>
</template>

<script>
import { Check,Search } from '@element-plus/icons-vue';
import { DomEditor } from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css';
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import request from "@/utils/request";
export default {
  components: {
    Editor,
    Toolbar
  },
  setup(){
    const editorRef = shallowRef();

    // 内容 HTML
    const valueHtml = ref('<p>hello</p>');

    // 模拟 ajax 异步获取内容
    onMounted(() => {
      setTimeout(() => {
        valueHtml.value = '<p>请输入内容</p>';
      }, 1500);
    });

    const editorConfig = { placeholder: '请输入内容...' };
    const toolbarConfig={excludeKeys:[
        'headerSelect',
        'italic',
        'group-more-style'
      ]};

/*    const toolbar = DomEditor.getToolbar(editorRef)

    const curToolbarConfig = toolbar.getConfig()
    console.log( curToolbarConfig.toolbarKeys+"   1231231" ) // 当前菜单排序和分组*/


    // 组件销毁时，也及时销毁编辑器，重要！
    onBeforeUnmount(() => {
      const editor = editorRef.value;

      if (editor == null) return;

      editor.destroy();
    });

    // 编辑器回调函数
    const handleCreated = (editor) => {
      console.log('created', editor);
      editorRef.value = editor; // 记录 editor 实例，重要！
    };

    const handleFocus = (editor) => {
      console.log('focus', editor);
    };
    const handleBlur = (editor) => {
      console.log('blur', editor);
    };

    const printHtml = () => {
      const editor = editorRef.value;
      if (editor == null) return;
      return editor.getHtml();
    };

    const disable = () => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.disable()
    };

    return {
      editorRef,
      mode: 'default',
      valueHtml,
      toolbarConfig,
      editorConfig,
      handleCreated,
      handleFocus,
      handleBlur,
      printHtml,
      disable,
      Check,
      Search
    };
  },
  name: "Manage",
  data(){
    return{
      ManagerData:[
      ],
      UserList:[
      ],
      UserTotal:0,
      searchName:'',
      searchId:'',
      userName:'',
      repoName:'',
      repoStatus:'',
      description:''
    }
  },
  created(){
    this.userName=sessionStorage.getItem("userName");
    this.repoName=this.$route.params.repoName;
    this.load();
  },
  update(){
    this.load()
  },
  methods:{
    test(){
      console.log("123123")
    },

    deleteManager(managerId,repoId,managerName,repoName){
      request.post("/manager/delete", {
        "managerId":managerId,
        "repoId":repoId,
        "managerName":managerName,
        "repoName":repoName,
      }).then(res => {
        if (res.code === 200) {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
          })
          this.load()
        }
      })
    },

    setSearch(userName,userId){
      this.searchName=userName
      this.searchId=userId
    },

    load(){
      request.get("/"+this.userName+"/"+this.repoName+"/managers", {
        params:{
          userName:this.userName,
          repoName:this.repoName
        }
      }).then(res => {
        console.log(res)
        this.ManagerData=res.data
      })
    },

    save(){
      var status;
      if(this.repoStatus=="私有"){
        status=1
      }
      else {
        status=0
      }
      this.description=this.printHtml()
      request.post("/repo/renew/info",  {"ownerId":this.userName, "repoName":this.repoName,"isPrivate":status,"description":this.description}).then(res => {
        if (res.code === 200) {
          this.$notify({
            title: '成功',
            message: '信息修改成功',
            type: 'success',
          })
          this.$router.push({
            path:'/'+sessionStorage.getItem("userName")+'/'+sessionStorage.getItem("repoName")+'/tree/master'
          })
        }

        else {
          this.$notify({
            title: '错误',
            message: res.msg,
            type: 'error',
          })
        }
      })
    },

    newManager(userName,userId){
      request.post("/manager/new", {"managerId": userId,"managerName":userName,"repoName":this.repoName,}).then(res => {
        if (res.code === 200) {
          this.$notify({
            title: '成功',
            message: '创建成功',
            type: 'success',
          })
          this.load()
        }
      })
    },

    userload(){
      if(this.search===''){
        this.search=null
        this.UserTotal=0
        return
      }
      request.get("/user/search", {
        params:{
          currentPage: 1,
          pageSize: 10,
          search:this.searchName
        }
      }).then(res => {
        console.log(res)
        this.UserList=res.data.records
        this.UserTotal=res.data.total
      })
    },

    unload(){
      this.search=null
      this.load()
    }

  }
}
</script>

<style scoped>
.box-card{
  height: 150px;
  width: 100px;
  border: 1px solid black;
  margin: 50px;
}
</style>
